<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>发送弹幕</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				height: 100vh;
				background-image: url('https://ts1.cn.mm.bing.net/th/id/R-C.1cf67ee3195d575f6fe66c58f888ea4d?rik=A%2fswwgew5EHgNQ&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20180821%2f0f29994c0143401db6863e3fbfb7b985.jpeg&ehk=mj0hjJmSjt6h59HQfmMr9dRb3kfy7vO7kBy93mt15%2fs%3d&risl=&pid=ImgRaw&r=0');
				background-repeat: no-repeat;
				background-size: cover;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}

			#content {
				width: 80vw;
				height: 80vh;
				background-color: transparent;
				position: relative;
				overflow: hidden;
				border-radius: 10px;
				backdrop-filter: blur(30px);
			}

			#havour {
				position: absolute;
				left: 0;
				top: 200px;
			}

			.user {
				width: 100%;
				height: 30px;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 10px;
			}

			.user input {
				width: 250px;
				height: 30px;
				outline: none;
				border: none;
				border-radius: 10px;
				padding-left: 10px;
			}

			.user button {
				width: 50px;
				height: 30px;
				border: none;
				border-radius: 10px;
				background-color: aquamarine;
			}

			#btn {
				background-color: blue;
			}

			.message {
				border: none;
				background-color: transparent;
				border-radius: 5px;
				position: absolute;
				animation: moving 5s linear;
				z-index: 10;
			}

			@keyframes moving {
				0% {
					transform: translateX(80vw);
				}

				100% {
					transform: translateX(-100%);
				}
			}

			#myVideo {
				width: 80vw;
				margin: auto;
				z-index: 2;
			}
		</style>
	</head>

	<body>

		<div id="content">
			<video src="./img/one.mp4" id="myVideo" autoplay="true" controls='true' onended="reStart()" loop></video>
			<div class="user">
				<input type="text" id="ipt" placeholder="分享此刻你的想法">
				<button id="btn">发送</button>
				<button onclick="addSpeed(2)">2倍速</button>
				<button onclick="addSpeed(4)">4倍速</button>
				<button onclick="addSpeed(6)">6倍速</button>
				<button onclick="addSpeed(8)">8倍速</button>
			</div>
		</div>
	</body>
	<script>
		//获取所需元素
		function $(str){
			return document.getElementById(str)
		}
		//增加弹幕
		$('btn').onclick = function(){
			//创建元素
			let label = document.createElement('label')
			//给创建的元素添加类名
			label.className = 'message';
			//给创建的元素赋值
			label.innerHTML = $('ipt').value;
			//把创建的元素添加道content里
			$('content').appendChild(label);
			//随机高度
			label.style.top = Math.floor(Math.random() * 30) +'vh'
			//随机的字体大小
			label.style.fontSize = Math.floor(Math.random() * 24 + 14) + 'px'
			//随机的字体颜色
			label.style.color = '#' + Math.floor(Math.random() * 16777215).toString(16)
			setTimeout(function(){
				$('content').removeChild(label)
			},5000)
		}
		function addSpeed(num){
			$('myVideo').playbackRate = num
		}
	</script>

</html>